<template>
  <div>
    <div id="player1" class="aplayer"></div>
    <img class="tit" src="../../../static/questions/img/qddk.png">
    <div class="point">{{this.pageVo.signInCount}}</div>
    <div class="tit1">打卡积分</div>
    <ul class="box">
      <li :class="{'sign' : this.pageVo.signInDayNum>=1}"><div>+1</div>1天</li>
      <li :class="{'sign' : this.pageVo.signInDayNum>=2}"><div>+2</div>2天</li>
      <li :class="{'sign' : this.pageVo.signInDayNum>=3}"><div>+3</div>3天</li>
      <li :class="{'sign' : this.pageVo.signInDayNum>=4}"><div>+4</div>4天</li>
      <li :class="{'sign' : this.pageVo.signInDayNum>=5}"><div>+5</div>5天</li>
      <li :class="{'sign' : this.pageVo.signInDayNum>=6}"><div>+6</div>6天</li>
      <li :class="{'sign' : this.pageVo.signInDayNum>=7}"><div>+7</div>7天</li>
      <div class="line"></div>
    </ul>
    <a class="btn" @click="signIn">打卡</a>
    <a class="btn btn1">去答题</a>
  </div>
</template>

<script type="text/ecmascript-6">
  import { Indicator,Toast  } from 'mint-ui'
  import api from '../../api/http.js'
  import url from '../../api/urlConst.js'
  import { config } from '../../common/js/weChat/service.js'
  export default {
    components: {},
    data() {
      return {
        weChatShareVo: {},
        pageVo:{
          mp3Name:'',
          author:'  ',
          mp3Url:'',
          signInCount:'',
          signInDayNum:'',
        }
      }
    },
    created() {
      this.integralPage()
      this.getWeChatShareVo()
    },
    methods:{
      integralPage(){
        Indicator.open()
        api.post(url.questions.integral.integralPage).then((res) => {
          setTimeout(()=>{Indicator.close()},300)
          if (res.success) {
          this.pageVo = res.data
            this.initPlayer()
          }
        })
        setTimeout(()=>{Indicator.close()},300)
      },
      signIn(){
        Indicator.open()
        api.post(url.questions.integral.signIn).then((res) => {
          setTimeout(()=>{Indicator.close()},300)
          if (res.success) {
            this.integralPage()
            Toast('打卡成功！');
          }
        })
        setTimeout(()=>{Indicator.close()},300)
      },



      initPlayer(){
        console.log(this.pageVo)
        let _this = this
        let ap = new APlayer({
          element: document.getElementById('player1'),
          narrow: false,
          showlrc: false,
          music: {
            title: _this.pageVo.mp3Name,
            author: _this.pageVo.author,
            url: _this.pageVo.mp3Url,
            pic: ''
          }
        });
        //ap.init();
      },
      getWeChatShareVo(){
        api.post(url.questions.weChatShareVo).then((res) => {
          if (res.success) {
            this.weChatShareVo = res.data
            setTimeout(() => {
              this._weChatConfig()
            }, 300)
          }
        })
      },
      _weChatConfig () {
        let param = {
          pageUrl: encodeURIComponent(location.href.split("#")[0])
        }
        api.get(url.weChat.getJsapiSignature, param).then((res) => {
          if (res.success) {
            let link = this.weChatShareVo.shareUrl + '?v=2'
            let imgUrl = this.weChatShareVo.shareImgUrl
            let title = this.weChatShareVo.shareTitle
            let desc = this.weChatShareVo.shareDesc
            config(res.data, link, imgUrl, title, desc)
          }

        })
      },
    }
  }
</script>

<style scoped>
  .aplayer{
    width: 89.33%;
    margin: 1.9rem auto 2.5rem;
  }
  .tit{
    display: block;
    width: 100%;
  }
  .btn{
    display: block;
    width: 89.33%;
    height: 2.2rem;
    line-height: 2.2rem;
    background-color: #FF4587;
    border-radius: 1.1rem;
    font-size: 18px;
    text-align: center;
    color: #fff;
    border:0;
    margin: 0 auto;
  }
  .btn1{
    margin-top: 1rem;
    box-sizing: border-box;
    border: 1px solid #FF4587;
    color: #FF4587;
    background-color: #fff;
  }
  .point{
    font-size: 28px;
    line-height: 2rem;
    margin: 1.6rem 0 1rem;
    text-align: center;
    color: #FF4587;
  }
  .tit1{
    text-align: center;
    font-size: 12px;
    line-height: 0.85rem;
  }
  .box{
    width: 89.33%;
    margin: 1.25rem auto 2rem;
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    overflow: hidden;
  }
  .box li{
    width: 1.7rem;
    text-align: center;
    font-size: 10px;
    line-height: 0.7rem;
    margin-right: 4.85%;
  }
  .box li:last-child{
    margin-right: 0;
  }
  .box li div{
    width: 1.7rem;
    height: 1.7rem;
    box-sizing: border-box;
    border: 1px solid #939393;
    margin-bottom: 2px;
    line-height: 1.7rem;
    font-size: 12px;
    color: #939393;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
  }
  .box .sign div{
    color: #333;
    background-color: #FFDB5A;
    border: 1px solid #FFDB5A;
  }
  .line{
    position: absolute;
    z-index: -1;
    top: 0.85rem;
    left: 0.5rem;
    width: 93%;
    height: 1px;
    background-color: #939393;
  }
  @media screen and (max-width: 360px) {
    .box li{
      margin-right: 4.3%;
    }
  }
  @media screen and (max-width: 320px) {
    .box li{
      margin-right: 2.8%;
    }
  }
  @media screen and (max-width: 280px) {
    .box li{
      margin-right: 0.5%;
    }
  }


</style>
